<template>
    <div class="avatar_main" :class="{'bc1': !value, 'bc2': value}">
        <el-avatar :src="Image" :size="250" class="ava_img"></el-avatar>
        <h1>Yogen</h1>
        <h4 style="color: #666666"></h4>
        <h3>我虽无意逐鹿，却知苍生苦楚</h3>
        <h3>只愿荡涤四方，护得浮世一隅</h3>
    </div>
</template>

<script>
import Image from "../assets/avater.jpg"
export default {
    props: {
        value: false
    },
    data() {
        return {
            Image: Image,
        }
    }
}
</script>

<style scoped>
.bc1 {
    background-image: url(../assets/bg_white.gif);
}
.bc2 {
    background-image: url(../assets/bg_black.gif);
}
.avatar_main {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat; /* 背景图片不重复 */
    background-size: cover; /* 背景图片覆盖整个元素 */
    display: flex;
    align-items: center;
    padding-top: 10px;
    flex-direction: column;
}

</style>